<template>
  <div class="app-container">
    <div class="servicePackageListDivDialog">
      <div class="servicePackageListDivSpan">
        服务详情
      </div>
    </div>
    <div class="servicePackageListChild">
      <div class="deployInfoDiv">
        <!-- 服务信息输入框 -->
        <div>
          <div class="displayLayout">
            <el-row>
              <el-col :span="8">
                <div>
                  <span class="spanStyle">
                    服务标识：
                  </span>
                  <el-input
                    placeholder="请输入服务标识"
                    style="width: 250px;"
                    v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.appName"
                    disabled
                  >
                  </el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <span class="spanStyle">
                    服务版本：
                  </span>
                  <el-input
                    placeholder="请输入服务版本"
                    style="width: 250px;"
                    v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.version"
                    disabled
                  >
                  </el-input>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="displayLayout">
            <el-row>
              <el-col :span="8">
                <div>
                  <span class="spanStyle">
                    服务镜像：
                  </span>
                  <el-input
                    placeholder="请输入服务镜像"
                    style="width: 250px;"
                    v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.image"
                    disabled
                  >
                  </el-input>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <span class="spanStyle">
                    服务描述：
                  </span>
                  <el-input
                    placeholder="请输入服务描述"
                    clearable
                    style="width: 250px;"
                    v-model="gvStoreYamlDeployVo.yamlDeployBaseInfo.description"
                    disabled
                  >
                  </el-input>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div style="float: right; margin-top: 10px;">
          <el-switch
            v-model="expandSwitch"
            active-color="#13ce66"
            inactive-color="#eeeeee"
            active-text="展开"
            @change="expandAll"
          >
          </el-switch>
        </div>
        <div style="margin-top: 40px;">
          <div>
            <el-collapse v-model="activeName" :accordion="accordionType">
              <el-collapse-item title="端口设置" name="1">
                <div v-for="(portInfo, index) in gvStoreYamlDeployVo.yamlDeployPortInfo" :key="portInfo.port"
                     style="margin-bottom: 5px;">
                  <el-row>
                    <el-col :span="4">
                      <span class="spanStyle">
                        协议：
                      </span>
                      <el-input
                        :disabled="true"
                        style="width: 120px"
                        v-model="portInfo.protocol"
                      >
                      </el-input>
                    </el-col>
                    <el-col :span="4">
                      <span class="spanStyle">
                        内部端口：
                      </span>
                      <el-input
                        style="width: 120px"
                        v-model="portInfo.port"
                        disabled
                      >
                      </el-input>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
              <el-collapse-item title="资源配置" name="2">
                <div>
                  <el-row>
                    <el-col :span="8">
                      <div style="margin-bottom: 5px;">
                        <span class="spanStyle">
                          CPU预留：
                        </span>
                        <el-input
                          style="width: 250px"
                          v-model="gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuRequest"
                          controls-position="right"
                          :min="0.1"
                          :max="256"
                          :step="0.1"
                          type="number"
                          disabled
                        >
                          <template v-slot:append>核</template>
                        </el-input>
                      </div>
                      <div>
                        <span class="spanStyle">
                          CPU限制：
                        </span>
                        <el-input
                          style="width: 250px;"
                          v-model="gvStoreYamlDeployVo.yamlDeployResourceInfo.cpuLimit"
                          controls-position="right"
                          :min="0.1"
                          :max="256"
                          :step="0.1"
                          type="number"
                          disabled
                        >
                          <template v-slot:append>核</template>
                        </el-input>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div style="margin-bottom: 5px;">
                        <span class="spanStyle">
                          内存预留：
                        </span>
                        <el-input
                          style="width: 250px"
                          v-model="gvStoreYamlDeployVo.yamlDeployResourceInfo.memRequest"
                          controls-position="right"
                          :min="4"
                          :max="16384"
                          :step="256"
                          type="number"
                          disabled
                        >
                          <template v-slot:append>MB</template>
                        </el-input>
                      </div>
                      <div>
                        <span class="spanStyle">
                          内存限制：
                        </span>
                        <el-input
                          style="width: 250px"
                          v-model="gvStoreYamlDeployVo.yamlDeployResourceInfo.memLimit"
                          controls-position="right"
                          :min="4"
                          :max="16384"
                          :step="256"
                          type="number"
                          disabled
                        >
                          <template v-slot:append>MB</template>
                        </el-input>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
              <el-collapse-item title="配置挂载" name="4" v-if="gvStoreYamlDeployVo.yamlDeployConfigInfo.length !== 0">
                <div v-for="(deployConfigInfo, index) in gvStoreYamlDeployVo.yamlDeployConfigInfo" :key="index"
                     style="margin-bottom: 5px;">
                  <el-row>
                    <el-col :span="5">
                      <span class="spanStyle">
                          文件名称：
                        </span>
                      <el-input
                        style="width: 150px;"
                        v-model="deployConfigInfo.mountFilename"
                        disabled
                      >
                      </el-input>
                    </el-col>
                    <el-col :span="8">
                      <span class="spanStyle">
                          挂载路径：
                        </span>
                      <el-input
                        style="width: 350px;"
                        v-model="deployConfigInfo.mountPath"
                        disabled
                      >
                      </el-input>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
              <el-collapse-item title="存储挂载" name="5" v-if="gvStoreYamlDeployVo.yamlDeployVolumeInfo.length !== 0">
                <div v-for="(deployVolumeInfo, index) in gvStoreYamlDeployVo.yamlDeployVolumeInfo" :key="index"
                     style="margin-bottom: 5px;">
                  <el-row>
                    <el-col :span="14">
                      <span class="spanStyle">
                          挂载路径：
                        </span>
                      <el-input
                        style="width: 300px;"
                        v-model="deployVolumeInfo.mountPath"
                        disabled
                      >
                      </el-input>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
              <el-collapse-item title="环境变量" name="6">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <div style="margin-bottom: 5px;">
                      KEY
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="margin-bottom: 5px;">
                      VALUE
                    </div>
                  </el-col>
                </el-row>
                <div v-for="(envInfo, index) in gvStoreYamlDeployVo.yamlDeployEnvInfo" :key="index">
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <div style="margin-bottom: 5px;">
                        <el-input
                          v-model="envInfo.key"
                          disabled
                        >
                        </el-input>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div style="margin-bottom: 5px;">
                        <el-input
                          v-model="envInfo.value"
                          disabled
                        >
                        </el-input>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
        <div class="deployButtonDiv">
          <el-button type="primary" size="small" @click="cancelDeploy"
                     class="el-button-primary-style"
          >
            返 回
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'ServicePackageDetail',
    data() {
      return {
        activeName: "0",
        accordionType: true,
        expandSwitch: false,
        gvStoreYamlDeployVo: {
          yamlDeployBaseInfo: {
            appName: "",
            deployName: "",
            version: "",
            image: "",
            description: "",
            replicas: 1
          },
          yamlDeployPortInfo: [],
          yamlDeployResourceInfo: {
            cpuRequest: 0,
            memRequest: 0,
            cpuLimit: 0,
            memLimit: 0
          },
          enableHpa: false,
          yamlDeployHpaInfo: {},
          yamlDeployConfigInfo: [],
          yamlDeployVolumeInfo: [],
          yamlDeployEnvInfo: [],
          livenessInfoOffline: {
            // 冒烟测试类型 url,file,program
            type: "",
            port: 0,
            portType: "",
            url: "",
            command: [],
            initialDelaySeconds: 0,
            periodSeconds: 0,
            timeoutSeconds: 0,
            persistentConnection: false,
            successThreshold: 0,
            failureThreshold: 0,
          },
          readinessInfoOffline: {
            // 冒烟测试类型 url,file,program
            type: "",
            port: 0,
            portType: "",
            url: "",
            command: [],
            initialDelaySeconds: 0,
            periodSeconds: 0,
            timeoutSeconds: 0,
            persistentConnection: false,
            successThreshold: 0,
            failureThreshold: 0,
          },
        },
      }
    },
    methods: {
      expandAll() {
        if (this.expandSwitch) {
          this.accordionType = false;
          this.activeName = ['1', '2', '4', '5', '6'];
        } else {
          this.accordionType = true;
          this.activeName = "0";
        }
      },
      getOneServiceDeployInfo(appName, appVersion) {
        this.$appStoreApi.getDeployConfig({appName: appName, appVersion: appVersion}).then(res => {
          if (res && res.code === 200) {
            this.gvStoreYamlDeployVo = res.data;
          }
        })
      },
      cancelDeploy() {
        this.$router.push({
          name: 'ServicePackage',
        })
      },
    },
    beforeMount() {
      if (this.$route.params.appName === undefined) {
        this.$router.push({
          name: 'ServicePackage',
        })
      } else {
        this.getOneServiceDeployInfo(this.$route.params.appName, this.$route.params.appVersion);
      }
    },
  }
</script>

<style lang="css">

  .el-collapse-item__header {
    font-size: 18px !important;
  }

  .el-switch__label * {
    font-size: 18px !important;
  }
</style>
